<!--
 * @Author: xcl
 * @Date: 2022-04-22 13:25:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-22 10:21:29
 * @Description: Cesium地图  基础组件
-->
<template>
  <div style="width: 100%; height: 100%">
    <div class="my-loading-mask" v-show="loading && isOpenLoading">
      <atom-spinner
        class="my-loading-spinner"
        :animation-duration="1000"
        :size="100"
        color="#FFF"
      />
      <div class="my-loading-text">{{ loadingText }}</div>
    </div>
    <div id="MAPContainer"></div>
  </div>
</template>

<script>
import { AtomSpinner } from "epic-spinners";
import mapImagery from "@/assets/js/map/mapImagery.js";
require("@/utils/mapImageryTool/index");
// import CesiumNavigation from 'cesium-navigation-es6'
export default {
  name: "CesiumMap",
  components: {
    "atom-spinner": AtomSpinner,
  },
  data() {
    return {
      loading: false,
      loadingText: "加载中...",
    };
  },
  props: {
    // 配置项
    opt: {
      default: () => {
        return {};
      },
      type: Object,
    },
    // 1：通过imageryFunction的方式加载影像图层、2：通过setConfigMapList的方式加载影像图层
    type: {
      default: 1,
      type: Number,
    },
    // 是否开启loading
    isOpenLoading: {
      default: false,
      type: Boolean,
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.initCesium();
  },
  beforeDestroy() {},
  destroyed() {
    this.destroyMap();
  },
  methods: {
    /** 销毁地图*/
    destroyMap() {
      const viewer = window.vmCesiumViewer;
      if (viewer) {
        viewer.dataSources.removeAll(true);
        viewer.scene.primitives.removeAll();
        viewer.entities.removeAll();
        viewer.imageryLayers.removeAll();
        viewer.destroy();
      }
    },

    /**
     * 初始化Cesium
     */
    initCesium() {
      let self = this;

      const cesiumContainerId = CesiumGlobeConfig.cesiumContainerId;
      const loadingIndicatorId = CesiumGlobeConfig.loadingIndicatorId;
      const opt = Object.assign({}, CesiumGlobeConfig.opt, self.opt);
      const mapImageData =
        !self.type || self.type === 1
          ? CesiumGlobeConfig.mapImageData1
          : CesiumGlobeConfig.mapImageData2;
      // 加载单张影像 第一层最小最透明的
      if (self.type && self.type === 2) {
        let imageryProviderConfig = new Cesium.SingleTileImageryProvider({
          url: 'static/cesium/background.png',
        });
        if (mapImageData.length !== 0) {
          imageryProviderConfig = new CesiumGlobe().setOneimageryProvider(mapImageData[0]);
        }
        opt.imageryProvider = imageryProviderConfig;
      }

      new CesiumGlobe().init(
        cesiumContainerId,
        loadingIndicatorId,
        opt,
        function (viewer) {
          // cesium 其它设置
          new CesiumGlobe().otherSettings(viewer, opt, self);

          // 初始化 cesium-navigation 控件
          // self.initCesiumNavigation(viewer, CesiumNavigation);

          // 影像图层
          if (!self.type || self.type === 1) {
            new CesiumGlobe().imageryFunction(
              viewer,
              mapImagery,
              mapImageData,
              self
            );
          } else {
            new CesiumGlobe().setConfigMapList(viewer, mapImageData, self);
          }
          
          if(self.isOpenLoading){
            // 监听地图服务矢量切片是否加载完成
            var helper = new Cesium.EventHelper();
            const RemoveCallback = helper.add(
              // 获取自上次渲染后切片加载队列的长度发生更改时引发的事件
              viewer.scene.globe.tileLoadProgressEvent,
              function (event, ss) {
                if (event == 0) {
                  self.loading = false;
                  self.loadingText = "地图载入完成";
                  // 更多其它操作...
                  self.$emit("fun", viewer, self);
                  // 移除事件监听
                  RemoveCallback();
                } else {
                  self.loading = true;
                  self.loadingText =
                    "地图载入中...，待处理: " + event + "个";
                }
              }
            );
          }else{
            // 更多其它操作...
            self.$emit("fun", viewer, self);
          }
        },
        self
      );
    },
  },
};
</script>

<style lang="less">
.my-loading-mask {
  background: url("../../assets/images/bg.png") no-repeat center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  cursor: wait;
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .my-loading-spinner {
  }

  .my-loading-text {
    color: #fff;
    margin: 12px 0;
    font-size: 24px;
    font-weight: 600;
  }
}

#MAPContainer {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bg.png") no-repeat center center;
  background-size: 100% 100%;

  .el-loading-mask {
    background: url("../../assets/images/bg.png") no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    cursor: wait;

    .el-loading-spinner {
      .el-icon-loading {
        color: #fff;
        font-size: 42px;
        font-weight: 600;
      }

      .el-loading-text {
        color: #fff;
        margin: 12px 0;
        font-size: 24px;
        font-weight: 600;
      }
    }
  }
}
</style>
